<template>
<div class="container">
    <!--搜索条件-->
    <div class="toolbar" style="float:left;">
        <el-form :inline="true" ref="filters" :model="filters" :size="size" label-width="120px">
            <el-form-item label="商户名称" prop="merchantName">
                <el-input v-model="filters.merchantName"></el-input>
            </el-form-item>
            <el-form-item label="商户code" prop="merchantCode" label-width="120px">
                <el-input v-model="filters.merchantCode" ></el-input>
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNo">
                <el-input v-model="filters.orderNo"></el-input>
            </el-form-item>
            <el-form-item label="第三方订单时间" prop="buyTime">
                <el-input v-model="filters.buyTime" placeholder="订单编号" clearable></el-input>
               <!--   <el-form-item prop="date">
                    <el-date-picker type="date" v-model="filters.buyTime" placeholder="下单时间" style="width: 180px;"></el-date-picker>
                </el-form-item> -->
            </el-form-item>

            <el-form-item label="订单类型" prop="orderTypeb">
                <el-select v-model="filters.orderTypeb" placeholder="全部" style="width:160px" clearable>
                    <el-option label="积分订单" value="1"></el-option>
                    <el-option label="普通订单" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="来源渠道" prop="sources">
                <el-select v-model="filters.sources" placeholder="全部" style="width:160px" clearable>
                    <el-option label="APP" value="1"></el-option>
                    <el-option label="商城小程序" value="2"></el-option>
                    <el-option label="企业微信" value="3"></el-option>
                    <el-option label="We2000公众号" value="4"></el-option>
                    <el-option label="商城公众号" value="5"></el-option>
                      <el-option label="其他" value="6"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="活动来源" prop="orderSources">
                <el-select v-model="filters.orderSources" placeholder="全部" style="width:160px" clearable>
                    <el-option label="拼团" value="1"></el-option>
                    <el-option label="秒杀" value="2"></el-option>
                    <el-option label="预售" value="3"></el-option>
                    <el-option label="抽奖" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收货人" prop="buyerRealname" label-width="120px">
                <el-input v-model="filters.buyerRealname" ></el-input>
            </el-form-item>
            <el-form-item label="收货人手机号" prop="consigneePhone" label-width="120px">
                <el-input v-model="filters.consigneePhone" ></el-input>
            </el-form-item>
            <el-form-item label="收货人地址" prop="" label-width="100px">
                <!-- <el-input v-model="filters.consigneePhone" ></el-input> -->
                <v-distpicker  :province="dataForm.addressProvinceName" @province="changeProvince" :city="dataForm.addressCityName" @city="changeCity" :area="dataForm.addressAreaName" @area="changeArea"></v-distpicker>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName" label-width="120px">
                <el-input v-model="filters.goodsName" ></el-input>
            </el-form-item>
            <el-form-item label="商品编码" prop="commodityCode" label-width="120px">
                <el-input v-model="filters.commodityCode" ></el-input>
            </el-form-item>
            <el-form-item prop="buyerId" label="会员手机号" label-width="120px">
                <el-input v-model="filters.tel" ></el-input>
            </el-form-item>
             <el-form-item prop="waybillNumber" label="运单编号" label-width="120px">
                <el-input v-model="filters.waybillNumber" ></el-input>
            </el-form-item>
            <el-form-item label="发货日期" prop="deliveryDate" label-width="120px">
                 <el-form-item prop="date">
                    <el-date-picker type="date" v-model="filters.deliveryDate" placeholder="发货时间" style="width: 180px;"></el-date-picker>
                </el-form-item>
            </el-form-item>
            <el-form-item label="支付方式" prop="payment" label-width="120px">
                <el-select v-model="filters.payment" placeholder="全部" style="width:160px" clearable>
                    <el-option label="微信分期" value="1"></el-option>
                    <el-option label="We2000" value="2"></el-option>
                    <el-option label="微信支付" value="3"></el-option>
                    <el-option label="微信银行储蓄卡" value="4"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="是否需要开发票" prop="whetherInvoice" label-width="120px">
                <el-select v-model="filters.whetherInvoice" placeholder="全部" style="width:160px" clearable>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结算状态" prop="balanceSts" label-width="120px">
                <el-select v-model="filters.balanceSts" placeholder="全部" style="width:160px" clearable>
                    <el-option label="未结算" value="1"></el-option>
                    <el-option label="已清算" value="2"></el-option>
                    <el-option label="轧差中" value="3"></el-option>
                    <el-option label="已轧差" value="4"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="订单标签" prop="orderTag">
                <el-select v-model="filters.orderTag" style="width:160px" placeholder="全部" clearable>
                    <el-option v-for="item in orderTagData" :key="item.code" :label="item.message" :value="item.code"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="购买方式" prop="buyerRealname" label-width="120px">
                 <el-select v-model="filters.orderTag" style="width:160px" placeholder="全部" clearable>
                    <el-option label="邮寄" value="0"></el-option>
                    <el-option label="线下自提" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
                <el-form-item prop="date">
                    <el-date-picker type="date" v-model="filters.buyTimeStart" placeholder="下单日期开始时间" style="width: 180px;"></el-date-picker>
                </el-form-item>
                <span class="dater">-</span>
                <el-form-item prop="date" style="width: 180px;">
                    <el-date-picker type="date" v-model="filters.buyTimeEnd" placeholder="下单日期开始时间"></el-date-picker>
                </el-form-item>
            </el-form-item>

            <!--底部按钮栏-->
            <el-col :span="16" :offset="10">
                <el-form-item>
                    <el-button type="primary" @click="findPage()">查询</el-button>
                    <el-button type="primary" @click="resetForm()">重置</el-button>
                    <!--<el-button type="primary" v-if="activeName=='2'" @click="handleManualDelivery()">手动转交货</el-button>-->
                    <!--<el-button type="primary" v-if="activeName=='2'" @click="throwOrder()">抛单</el-button>-->
                </el-form-item>
            </el-col>
        </el-form>
    </div>

    <!--订单主列表-->
    <div class="tab-container">
        <el-col :span="24">
            <el-tabs type="border-card" v-model="activeName" @tab-click="handleOrderPage()">
                <el-tab-pane v-for="item in tabMapOptions" :key="item.code" :label="item.message" :name="item.code.toString()">
                    <el-table :data="orderPageList" :size="size" align="center" header-align="center" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}" highlight-current-row stripe>
                        <el-table-column type="selection" width="45"></el-table-column>
                        <el-table-column prop="merchantName" label="商户名称" min-width="240"></el-table-column>
                        <el-table-column prop="orderNo" label="订单编号" min-width="240"></el-table-column>
                        <!-- <el-table-column prop="predictDeliveryTime" label="预计送达时间" min-width="240"></el-table-column> -->
                        <el-table-column prop="orderTypeb" label="订单类型" min-width="100">
                            <template slot-scope="scope">
                                {{scope.row.orderTypeb=='1'? '积分订单':'普通订单'}}
                            </template>
                        </el-table-column>
                          <el-table-column prop="sources" label="来源渠道" min-width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sources=='1'">APP</span>
                                <span v-if="scope.row.sources=='2'">商城小程序</span>
                                <span v-if="scope.row.sources=='3'">企业微信</span>
                                <span v-if="scope.row.sources=='4'">We2000公众号</span>
                                <span v-if="scope.row.sources=='5'">商城公众号</span>
                                <span v-if="scope.row.sources=='6'">其他</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderSources" label="订单来源" min-width="100">
                            <template slot-scope="scope">
                               <span v-if="scope.row.orderSources=='1'">拼团</span>
                                <span v-if="scope.row.orderSources=='2'">秒杀</span>
                                <span v-if="scope.row.orderSources=='3'">预售</span>
                                <span v-if="scope.row.orderSources=='4'">抽奖</span>
                            </template>
                        </el-table-column>
                         <el-table-column prop="" label="商户类型" min-width="240"></el-table-column>
                         <el-table-column prop="buyTime" label="下单日期" min-width="150"></el-table-column>
                        <el-table-column prop="buyerId" label="下单会员账号" min-width="120"></el-table-column>
                        <el-table-column prop="discountTotalAmount" label="订单优惠金额合计" min-width="100"></el-table-column>
                        <el-table-column prop="actualPayTotalAmount" label="实付金额" min-width="100"></el-table-column>
                        <el-table-column prop="orderCumtrapz" label="订单积分合计" min-width="100"></el-table-column>
                        <el-table-column prop="orderStatus" label="支付状态" min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.orderStatus =='1'">未支付</span>
                            <span v-if="scope.row.orderStatus >='2'">已支付</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="orderStatus" label="订单状态" min-width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.orderStatus =='1'">待支付</span>
                                <span v-if="scope.row.orderStatus =='2'">待审核</span>
                                <span v-if="scope.row.orderStatus =='3'">待确认</span>
                                <span v-if="scope.row.orderStatus =='4'">待发货</span>
                                <span v-if="scope.row.orderStatus =='5'">已发货</span>
                                <span v-if="scope.row.orderStatus =='6'">已完成</span>
                                <span v-if="scope.row.orderStatus =='7'">已关闭</span>
                                <span v-if="scope.row.orderStatus =='8'">已评价</span>
                                <span v-if="scope.row.orderStatus =='9'">已删除</span>
                                <span v-if="scope.row.orderStatus =='10'">已退款</span>
                            </template>
                        </el-table-column>
                         <el-table-column prop="balanceSts" label="结算状态" min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.balanceSts =='1'">未结算</span>
                            <span v-if="scope.row.balanceSts >='2'">已清算</span>
                             <span v-if="scope.row.balanceSts =='3'">轧差中</span>
                            <span v-if="scope.row.balanceSts >='4'">已轧差</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="payment" label="支付方式" min-width="100">
                        <template slot-scope="scope">
                           <span v-if="scope.row.payment=='1'">微信分期</span>
                            <span v-if="scope.row.payment=='2'">We2000</span>
                            <span v-if="scope.row.payment=='3'">微信支付</span>
                            <span v-if="scope.row.payment=='4'">微信银行储蓄卡</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="whetherInvoice" label="是否需要开发票" min-width="100">
                        <template slot-scope="scope">
                           <span v-if="scope.row.whetherInvoice=='1'">是</span>
                            <span v-if="scope.row.whetherInvoice=='2'">否</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="goodsName" label="商品名称" width="500px"></el-table-column>

                        <el-table-column label="操作" fixed="right" min-width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.orderStatus =='2'">
                                    <el-button size="mini" @click="check(scope.row)">查看</el-button>
                                    <el-button size="mini" @click="audit(scope.row)">审核</el-button>
                                </span>
                                 <span v-if="scope.row.orderStatus =='3'">
                                    <el-button size="mini" @click="check(scope.row)">查看</el-button>
                                    <el-button size="mini" @click="receivingOrders(scope.row)">确认接单</el-button>
                                </span>

                              <span v-if="scope.row.orderStatus =='4' ">
                                    <el-button size="mini" @click="check(scope.row)">查看</el-button>
                                    <el-button size="mini" @click="faHuo(scope.row)">发货</el-button>

                                </span>
                                <span v-if="scope.row.orderStatus !='2' && scope.row.orderStatus !='3'&&scope.row.orderStatus !='4' ">
                                    <el-button size="mini" @click="check(scope.row)">查看</el-button>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-col>
        <el-col :span="24">
            <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest" @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]"></el-pagination>
        </el-col>
    </div>

    <!--审核-->
    <el-dialog title="订单审核" :visible.sync="auditDialogVisible" width="40%" :close-on-click-modal="false" center>
        <el-form ref="auditDataForm" :model="auditDataForm" label-width="80px" :size="size">
            <el-form-item label="审批" prop="auditDataForm.auditStatus">
                <el-radio v-model="auditDataForm.auditStatus" label="1">通过</el-radio>
                <el-radio v-model="auditDataForm.auditStatus" label="0">拒绝</el-radio>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="auditDataForm.auditMessage"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="auditDialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="auditSubmitForm">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>

    <!--抛单-->
    <el-dialog title="抛单" :visible.sync="editDialogVisible" width="60%" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="80px" ref="dataForm" :size="size">
            <el-form-item>
                <el-table :data="tableProductData" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
                    <el-table-column prop="date" label="商品主图" width="150">
                        <template slot-scope="scope">
                            <img :src="scope.row.goodsImgUrl" style="width: 60px;height: 60px" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称" width="500px"></el-table-column>
                    <el-table-column prop="goodsNum" label="订购数量" width="100"></el-table-column>
                    <el-table-column prop="buyUnitPrice" width="150" label="购买单价">
                        <template slot-scope="scope">
                            <el-input type="number" v-model="scope.row.buyUnitPrice" placeholder="请输入购买单价"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button :size="size" @click.native="editDialogVisible = false">{{ $t('action.cancel') }}</el-button>
            <el-button :size="size" type="primary" @click="submitThrowOrderForm" :loading="editLoading">{{ $t('action.submit') }}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
    components: {
        VDistpicker,
    },
    data() {
        return {
            size: 'small',
            activeName: '0',
            loading: false,
            filters: {},
            orderPageList: [],
            totalSize: 0,
            pageRequest: {
                pageNum: 1,
                pageSize: 10,
            },

            tableProductData: [],
            dataForm: {},
            editDialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            orderTagData: [], // 订单标签
            tabMapOptions: [], // tab订单状态
            auditDialogVisible: false,
            auditDataForm: {
                orderNo: '',
                auditStatus: '1',
                auditMessage: '',
            }, // 审核
            childOrderNoData: [], // 组件列表所选订单编号
        }
    },

    mounted() {
        this.init()
    },

    methods: {
         changeProvince(data) {
            this.dataForm.addressProvinceId = data.code;
            this.dataForm.addressProvinceName = data.value;
        },
        changeCity(data) {
            this.dataForm.addressCityId = data.code;
            this.dataForm.addressCityName = data.value;
        },
        changeArea(data) {
            this.dataForm.addressAreaId = data.code;
            this.dataForm.addressAreaName = data.value;
        },
        // 初始化页面数据
        init() {
            // 订单标签
            let enumParam = {}
            enumParam.enumName = 'com.jic.order.enums.OrderTagEnum'
            this.utils.request.queryEnumList(enumParam, (res) => {
                if (res.code == '0000') {
                    this.orderTagData = res.data
                }
            })

            // 订单状态
            enumParam.enumName = 'com.jic.order.enums.OrderStatusEnum'
            this.utils.request.queryEnumList(enumParam, (res) => {
                if (res.code == '0000') {
                    this.tabMapOptions =[{code:1,message:"待支付"},
                                        {code:2,message:"待审核"},
                                        {code:3,message:"待确认"},
                                        {code:4,message:"待发货"},
                                        {code:5,message:"已发货"},
                                        {code:6,message:"已完成"},
                                        {code:7,message:"已关闭"},
                                        {code:8,message:"已评价"},
                                        {code:9,message:"已删除"},
                                        {code:10,message:"已退款"},
                                        {code:11,message:"全部"}];
                    // 移除付款处理中
                    this.tabMapOptions.splice(7, 1)
                    this.tabMapOptions.splice(9, 1)
                    this.tabMapOptions.unshift({
                        code: 0,
                        message: '全部'
                    })
                }
            })
            this.findPage()
        },

        // 订单tab点击切换
        handleOrderPage() {
            this.findPage()
        },

        //新增发货逻辑
          faHuo(row){
            this.$router.push({
              path: '/OrderDeliveryDetails/'+row.orderNo
            })

          },


        // 获取订单数据
        findPage() {
           debugger
            this.loading = true
            this.filters.start = this.pageRequest.pageNum
            this.filters.limit = this.pageRequest.pageSize
            if (this.activeName == '0') {
                this.filters.orderStatus = null
            } else {
                this.filters.orderStatus = this.activeName
            }
            let this_ = this
            this.utils.request.queryPageOrderList(this.filters, function (res) {
                this_.loading = false
                if (res.code === '0000') {
                    this_.orderPageList = res.data.list;
                    this_.totalSize = Number(res.data.total)
                } else {
                    this_.orderPageList = []
                    this_.totalSize = 0
                }
            })
        },

        // 重置查询
        resetForm() {
            this.pageRequest = {
                pageNum: 1,
                pageSize: 10
            }
            this.filters = {}
            this.findPage()
        },

        // 查看按钮
        check(row) {
            this.$router.push({
                path: '/OrderDetail/' + row.orderNo
            })
        },

        // 审核按钮
        audit(row) {
            this.auditDialogVisible = true
            this.auditDataForm = {
                orderNo: row.orderNo,
                auditStatus: '1',
                auditMessage: ''
            }
        },
        receivingOrders(row) {
          /**
           *2020年12月06日18:52:00
           *吴磊
           *更改订单状态
           */


          let this_ = this
          this_.utils.request.modifyOrderStatus({orderNo:row.orderNo,orderStatus:row.orderStatus,id:row.id},function(res){
            this_.$message({
              message: '操作成功',
              type: 'success'
            })
          });





        },

        // 提交审核
        auditSubmitForm() {
            let this_ = this
            this_.utils.request.orderAudit(this_.auditDataForm, (res) => {
                if (res.code == '0000') {
                    this_.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                    this_.auditDialogVisible = false
                    this_.auditDataForm.auditMessage = ''
                    this_.findPage()
                } else
                    this_.$message({
                        message: '操作失败,' + res.msg,
                        type: 'error'
                    })
            })
        },

        // 换页刷新
        handleSizeChange: function (pageSize) {
            this.pageRequest.pageNum = 1
            this.pageRequest.pageSize = pageSize
            this.findPage()
        },

        // 换页刷新
        refreshPageRequest: function (pageNum) {
            this.pageRequest.pageNum = pageNum
            this.findPage()
        },

        // 订单复选框所选
        handleSelectionChange(data) {
            this.childOrderNoData = data
        },

        // 提交抛单
        submitThrowOrderForm: function () {
            let this_ = this
            this_.$refs.dataForm.validate(valid => {
                if (valid) {
                    this_.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this_.editLoading = true
                        let params = {}
                        let orderDeliveryReleaseRequestList = new Array()
                        this_.tableProductData.forEach(item => {
                            let obj = {}
                            obj.orderNo = this_.childOrderNoData[0].orderNo
                            obj.productId = item.goodsId
                            obj.productNum = item.goodsNum
                            obj.productPrice = item.buyUnitPrice
                            obj.status = 1
                            orderDeliveryReleaseRequestList.push(obj)
                        })
                        params.orderDeliveryReleaseRequestList = orderDeliveryReleaseRequestList
                        this_.utils.request.saveOrderDeliveryRelease(params, function (res) {
                            if (res.code == '0000') {
                                this_.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                            } else {
                                this_.$message({
                                    message: '操作失败, ' + res.msg,
                                    type: 'error'
                                })
                            }
                            this_.editDialogVisible = false
                            this_.editLoading = false
                        })
                    })
                }
            })
        },

        // 抛单
        throwOrder: function () {
            let this_ = this
            if (this.childOrderNoData.length != 1) {
                this.$message({
                    type: 'warning',
                    message: '请先勾选一个订单!'
                })
            } else {
                this_.editLoading = false
                this_.tableProductData = []
                this_.findProduct(this_.childOrderNoData[0].orderNo)
                this_.editDialogVisible = true
            }
        },

        // 查询订单下的产品
        findProduct: function (data) {
            let this_ = this
            let param = {}
            param.orderNo = data
            this.utils.request.queryOrderGoodsByOrderNo(param, function (res) {
                if (res.code == '0000') {
                    this_.tableProductData = res.data
                } else {
                    this_.tableProductData = []
                }
            })
        },

        // 手动转交货按钮
        handleManualDelivery() {
            if (this.childOrderNoData.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请先勾选一个订单!'
                })
            } else {
                if (this.childOrderNoData.length == 1) {

                  ///getDeliveryOrderManageDetail/:id
                    this.$router.push({
                        // path: '/ManualDelivery/' + this.childOrderNoData[0].orderNo
                        path: '/getDeliveryOrderManageDetail/' + this.childOrderNoData[0].orderNo
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '只能勾选一个订单!'
                    })
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.el-tabs--border-card>.el-tabs__content {
    padding: 0;
}


/* 搜索条件样式统一 */
.toolbar /deep/ .el-form-item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 15px;
}

.toolbar /deep/ .el-input__inner {
    height: 32px;
    line-height: 32px;
}

.toolbar /deep/ .el-form-item__label {
    height: 32px;
    line-height: 32px;
}

.spec /deep/ .el-input__inner {
    padding-right: 0;
}

.el-input {
    width: 160px !important;
    height: 32px;
    line-height: 32px;
}

.el-date-editor {
    width: 160px !important;
}

.container {
    padding-top: 10px;
    width: 100%;
    height: 100%;
}
</style>
